<template>
	<view class="body-view">
		<!--导航和状态栏-->
		<view class="state-navigation">
            <view class="slim_header_bg" :style="{background: `rgba(178, 250, 205,${opacityNum})`}"></view>
			<view class="slim_header_navigation psr d-flex a-center j-center">
				<view class="left_box" @tap="goBack">
					<image src="/static/center/back.png" class="back"></image>
				</view>
				<view class="title">身体数据</view>
				<!-- 
				<view class="right_box">
					<image src="/static/center/dian.png" class="dian"></image> 
				</view>
				-->
			</view>
		</view>
		<!-- 顶部位置占位 -->
		<view style="height:calc(100rpx + var(--status-bar-height));"></view>
		<view class="data-view">
			<view class="data-info">
				<view class="data-info-title d-flex a-center j-between">
					<view>
						<view class="info-title-background" style="width: 138rpx;"></view>
						<view class="info-title-text">BMI指数</view>
					</view>
					<view class="d-flex">
						<view class="info-title-number">{{BMI}}</view>
						<view class="info-title-unit">{{BMITip(BMI)}}</view>
					</view>
				</view>
				<view class="data-info-chart d-flex j-between">
					<view class="info-chart-1">
						<view class="chart-mark" v-if="BMI<18.5" :style="{ borderTopColor: '#65E7E8' , left: BMIletf(BMI) + '%' }"></view>
						<view class="chart-1-v"></view>
						<view class="info-chart-describe">&lt;18.5偏瘦</view>
					</view>
					<view class="info-chart-2">
						<view class="chart-mark" v-if="BMI>=18.5&&BMI<=23.9" :style="{ borderTopColor: '#7FF0AC' , left: BMIletf(BMI) + '%' }"></view>
						<view class="chart-2-v"></view>
						<view class="info-chart-describe">18.5-23.9正常</view>
					</view>
					<view class="info-chart-3">
						<view class="chart-mark" v-if="BMI>=24&&BMI<=29.9" :style="{ borderTopColor: '#FFD401' , left: BMIletf(BMI) + '%' }"></view>
						<view class="chart-3-v"></view>
						<view class="info-chart-describe">24-29.9偏重</view>
					</view>
					<view class="info-chart-4">
						<view class="chart-mark" v-if="BMI>=30&&BMI<=34.9" :style="{ borderTopColor: '#FF9858' , left: BMIletf(BMI) + '%' }"></view>
						<view class="chart-4-v"></view>
						<view class="info-chart-describe">30-34.9超重</view>
					</view>
					<view class="info-chart-5">
						<view class="chart-mark" v-if="BMI>34.9" :style="{ borderTopColor: '#FF6B4F' , left: BMIletf(BMI) + '%' }"></view>
						<view class="chart-5-v"></view>
						<view class="info-chart-describe">&gt;34.9严重超重</view>
					</view>
				</view>
				<view class="data-info-algorit">女性体脂率=1.2×BMI指数+0.23×年龄-5.4</view>
			</view>
			<view style="height: 20rpx;"></view>
			<view class="data-info" style="height: 340rpx;">
				<view class="data-info-title d-flex a-center j-between">
					<view>
						<view class="info-title-background" style="width: 172rpx;"></view>
						<view class="info-title-text">预估体脂率</view>
					</view>
					<view class="d-flex">
						<view class="info-title-number">{{bodyfat}}</view>
						<view class="info-title-unit">{{bodyfatTip(bodyfat)}}</view>
					</view>
				</view>
				<view class="data-info-chart d-flex j-between">
					<view class="info-chart-6">
						<view class="chart-mark" v-if="bodyfat<20" :style="{ borderTopColor: '#65E7E8', left: bodyfatletf(bodyfat) + '%' }"></view>
						<view class="chart-6-v"></view>
						<view class="info-chart-describe">&lt;20偏瘦</view>
					</view>
					<view class="info-chart-7">
						<view class="chart-mark" v-if="bodyfat>=20&&bodyfat<=34.9" :style="{ borderTopColor: '#7FF0AC', left: bodyfatletf(bodyfat) + '%' }"></view>
						<view class="chart-7-v"></view>
						<view class="info-chart-describe">20-34.9正常</view>
					</view>
					<view class="info-chart-8">
						<view class="chart-mark" v-if="bodyfat>=35&&bodyfat<=39.9" :style="{ borderTopColor: '#FF9858', left: bodyfatletf(bodyfat) + '%' }"></view>
						<view class="chart-8-v"></view>
						<view class="info-chart-describe">35-39.9偏重</view>
					</view>
					<view class="info-chart-9">
						<view class="chart-mark" v-if="bodyfat>39.9" :style="{ borderTopColor: '#FF6B4F', left: bodyfatletf(bodyfat) + '%' }"></view>
						<view class="chart-9-v"></view>
						<view class="info-chart-describe">&gt;39.9超重</view>
					</view>
				</view>
				<view class="data-info-algorit">女性体脂率=1.2×BMI指数+0.23×年龄-5.4</view>
				<view class="data-info-algorit">男性体脂率=1.2×BMI指数+0.23×年龄-5.4-10.8×1</view>
			</view>
			<view style="height: 20rpx;"></view>
			<view class="data-info" style="height: 470rpx;">
				<view class="data-info-title d-flex a-center j-between">
					<view>
						<view class="info-title-background" style="width: 138rpx;"></view>
						<view class="info-title-text">基础代谢</view>
					</view>
					<view class="d-flex">
						<view class="info-title-number">{{consumeRest}}</view>
						<view class="info-title-unit">千卡/天</view>
					</view>
				</view>
				<view class="data-info-algorit" style="padding-top: 0;">基础代谢率是指一个人在静止不动的状态鞋，身体维持生命所需的最低热量需要消耗的卡路里数</view>
				<view class="data-info-algorit" style="padding-top: 50rpx;">女性代谢率=655.096+9.563×体重(公斤)+1.85×身高(厘米)-4.676×年龄</view>
				<view class="data-info-algorit" style="padding-top: 50rpx;">男性代谢率=66.473+13.752×体重(公斤)+5.003×身高(厘米)-6.775×年龄</view>
			</view>
		</view>

        <!-- <view class="health_desp">
                    <view class="row">
                        用户使用本APP客户端所提供的信息，在做出决策之前，应先咨询医生意见。若对信息内容理解有误，而对自身情况判断错误，由用户自行承担后果。
                    </view>

                    <view class="row">
                        本页面数据及观点来源于文献：
                    </view>

                    <view class="row">
                        <view class="desp">
                            [1]《身体状况：人体测量的使用和解释》，世界卫生组织，(1995)，WHO技术报告系列854。
                        </view>

                        <view class="link" @tap="openLink('https://www.who.int/publications/i/item/9241208546')">
                            https://www.who.int/publications/i/item/9241208546
                        </view>
                    </view>
                    <view class="row">
                        <view class="desp">
                            [2]杨月欣,葛可佑. 中国营养科学全书[M]. 人民卫生出版社, 2019。
                        </view>
                    </view>
                    <view class="row">
                        <view class="desp">[3]《中国肥胖预防和控制蓝皮书》</view> 
                        <view class="link" @tap="openLink('https://www.cnsoc.org/bookpublica/751910201.html')">https://www.cnsoc.org/bookpublica/751910201.html</view>

                    </view>
                    <view class="row">
                        <view class="desp">[4]中华医学会健康管理学分会等.超重或肥胖人群体重管理流程专家共识(2021年).中华健康管理学杂志,2021年4期</view>
                    </view>
                    <view class="row">
                        <view class="link" @tap="openLink('https://www.verywellfit.com/understanding-weight-loss-plateaus-1229951')">
                            [5]https://www.verywellfit.com/understanding-weight-loss-plateaus-1229951
                        </view>
                    </view>
                    

                </view> -->
        <statement></statement>
	</view>
</template>

<script setup lang="tsx" name="bodyDataDetails">
import { getBodyInfo } from "@/api/api";
import { ref } from "vue";
import { onShow ,onPageScroll} from '@dcloudio/uni-app';
import { userData as userDataStore } from "@/store/userData";
import BigNumber from "bignumber.js";
import statement from "@/components/statement.vue";

const userData: any = userDataStore();
const bodyInfo:any = ref();

const goBack = () => {
	uni.navigateBack();
};

const schedule = ref(0);//减肥完成度
const complete = ref(0);//已减重量
const BMI = ref(0);//体质指数
const bodyfat = ref(0);//体脂率
const consumeRest = ref(0);//基础代谢
//const isNormal = ref(true);//指数是否正常

const opacityNum: any = ref(0); 

onPageScroll((res) => {
    const scrollTop = res.scrollTop;
    if (scrollTop >= 0) {
        // 导航条颜色透明渐变
        if (scrollTop <= 20) {
            opacityNum.value = 0;
        } else if (20 < scrollTop && scrollTop <= 100) {
            opacityNum.value = scrollTop / 50;
        } else if (scrollTop > 100) {
            opacityNum.value = 1;
        }
    }
});

onShow(()=>{
	getBodyInfo({userId:userData.id}).then((res:any) => {
		if(res.success){
			bodyInfo.value = res.data;
			
			//bodyInfo.value.userWeightRecord.weight = 50;
			
			let initWeight = bodyInfo.value?.userHealth?.initWeight;
			let aimWeight = bodyInfo.value?.userHealth?.aimWeight;
			let weight = bodyInfo.value?.userWeightRecord?.weight;
			let stature = bodyInfo.value?.userHealth?.stature;
			let age = bodyInfo.value?.userHealth?.age;
			let sex = bodyInfo.value?.userHealth?.sex;
			//计算减肥完成率
			if(initWeight!=null&&aimWeight!=null&&weight!=null){
				let aim = new BigNumber(initWeight).minus(new BigNumber(aimWeight));//目标减重
				complete.value = new BigNumber(initWeight).minus(new BigNumber(weight)).toNumber()//当前减重
				schedule.value = Math.round(new BigNumber(complete.value).div(aim).times(new BigNumber(100)).toNumber());
				if(schedule.value>100)schedule.value = 100;
				if(schedule.value<0)schedule.value = 0;
			}
			//计算体质指数
			if(stature!==null&&weight!=null){
				let m = new BigNumber(stature).div(new BigNumber(100));
				BMI.value = Number(new BigNumber(weight).div(m.times(m)).toNumber().toFixed(1));
			}
			//BMI.value = 24
			//计算体脂
			if(BMI.value>0&&age!=null&&sex>0){
				let val = new BigNumber(1.2).times(new BigNumber(BMI.value)).plus(new BigNumber(0.23).times(new BigNumber(age))).minus(new BigNumber(5.4))
				if(sex==1){
					val.minus(new BigNumber(18.1))
				}
				bodyfat.value = Number(val.toNumber().toFixed(1));
				
			}
			//基础代谢计算
			if(stature!==null&&weight!=null&&sex>0){
				if (sex === 1) {
				    let weights = new BigNumber(13.73).multipliedBy(
						new BigNumber(weight)
				    );
				    let height = new BigNumber(5).multipliedBy(
						new BigNumber(stature)
				    );
				    let ages = new BigNumber(6.9).multipliedBy(
						new BigNumber(age)
					);
				    consumeRest.value = Math.round(
				        new BigNumber(67).plus(weights).plus(height).minus(ages).toNumber()
				    );
					//console.log(consumeRest.value)
				}
				if (sex === 2) {
				    let weights = new BigNumber(9.6).multipliedBy(
				        new BigNumber(weight)
				    );
				    let height = new BigNumber(1.72).multipliedBy(
				        new BigNumber(stature)
				    );
				    let ages = new BigNumber(4.7).multipliedBy(
						new BigNumber(age)
					);
				    consumeRest.value = Math.round(
				        new BigNumber(661).plus(weights).plus(height).minus(ages).toNumber()
				    );
				}
			}
			/*
			if(BMI.value>23.9||bodyfat.value>34.9){
				isNormal.value = false;
			}
			*/
		}
	});
});
const BMITip = (index:number) => {
	if(index<18.5)return "偏瘦";
	if(index>=18.5&&index<=23.9)return "正常";
	if(index>=24&&index<=29.9)return "偏重";
	if(index>=30&&index<=34.9)return "超重";
	if(index>34.9)return "严重超重";
}
const BMIletf = (index:number) => {
	let min = 0;
	let max = 0;
	if(index<18.5){
		min = 13.4
		max = 18.4;
	}
	if(index>=18.5&&index<=23.9){
		min = 18.5
		max = 23.9;
	}
	if(index>=24&&index<=29.9){
		min = 24
		max = 29.9;
	}
	if(index>=30&&index<=34.9){
		min =30
		max = 34.9;
	}
	if(index>34.9){
		min =34.9
		max = 39.9;
	}
	let val =  Number(Math.round(((index - min) / (max - min) * 100)));
	if(val<0)val = 0;
	if(val>100)val = 100;
	return val;
}
const bodyfatTip = (index:number) => {
	if(index<20)return "偏瘦";
	if(index>=20&&index<=34.9)return "正常";
	if(index>=35&&index<=39.9)return "偏重";
	if(index>=40)return "超重";
}
const bodyfatletf = (index:number) => {
	let min = 0;
	let max = 0;
	if(index<20){
		min = 14.9
		max = 19.9;
	}
	if(index>=20&&index<=34.9){
		min = 20
		max = 34.9;
	}
	if(index>=35&&index<=39.9){
		min =35
		max = 39.9;
	}
	if(index>39.9){
		min =39.9
		max = 44.9;
	}
	let val =  Number(Math.round(((index - min) / (max - min) * 100)));
	if(val<0)val = 0;
	if(val>1000)val = 100;
	return val;
}
</script>

<style lang="scss" scoped>
@import './bodyDataDetails.scss';
.health_desp{
    width:710rpx;
    margin:0 auto;
    padding:20rpx;
    border-radius: 10rpx;
    background:#fff;
    margin-top:20rpx;
    .row{
        font-size:20rpx;
        color:#666;
        font-weight:400;
        margin-top:10rpx;
        .link{
            text-decoration:underline;
            color:#566c94;
        }
    }
}

.state-navigation{
    z-index:50;
}

.slim_header_navigation{
    .title{
        position: relative;
        z-index: 10;
    }
    .right_box{
        position: relative;
        z-index: 10;
    }
}

.slim_header_bg{
    width:100%;
    height:100%;
    position:absolute;
    top:0;
    left:0;
}
</style>

